import React, { useState } from 'react'
import Navbar from '@/components/Navbar/'
import styles from './index.module.scss'
import { TextArea } from 'antd-mobile'
import Input from '@/components/Input/'
import { useSelector } from 'react-redux'

function EditInput({ onClose, current, onSubmit, }) {
    const defaultProfile = useSelector(state => state.mine.profile)
    const [value, setValue] = useState(current === 'name' ? defaultProfile.name : defaultProfile.intro || '')
    const onChange = (e) => {
        current === 'name' ? setValue(e.target.value) : setValue(e)
    }


    return (
        <div className={styles.root}>
            <Navbar extra={<span className='am-picker-popup-header-right' onClick={() => onSubmit(current, value)}>提交</span>} navbarAction={onClose} type={false}>
                编辑{current === 'name' ? '昵称' : '简介'}
            </Navbar>
            <div className='content'>
                <h3>{current === 'name' ? '昵称' : '简介'}</h3>
            </div>
            {current === 'name' && <Input
                className="input-wrap"
                value={value}
                onChange={e => onChange(e)} />}
            {current === 'intro' && <TextArea
                value={value}
                showCount
                maxLength={100}
                style={{ backgroundColor: '#fff', padding: 15 }}
                onChange={e => onChange(e)}
            />}
        </div>
    )
}

export default EditInput